<template>
    <div :class="className" :id="id" :style="{height:height,width:width}"></div>
</template>
<script>
    const echarts = require('echarts/lib/echarts');
    // 引入图
    require('echarts/lib/chart/pie')
    // 引入提示框和标题组件
    require('echarts/lib/component/markLine');
    require('echarts/lib/component/markPoint');
    require('echarts/lib/component/tooltip');
    export default {
      name: 'barPercent',
      props: {
        className: {
          type: String,
          default: 'bar-percent-chart'
        },
        id: {
          type: String,
          default: 'bar-percent-chart'
        },
        width: {
          type: String,
          default: '100px'
        },
        height: {
          type: String,
          default: '80px'
        },
        gaterName: {
          type: String,
          default: ''
        },
        pieDataList: {
          type: Array,
          default: []
        }
      },
      data() {
        return {
          chart: null
        };
      },
      watch: {
        dataNum() {
          this.setOptions()
        }
      },
      mounted() {
        this.initBar();
      },
      methods: {
        initBar() {
          this.chart = echarts.init(document.getElementById(this.id));
          this.setOptions();
        },
        setOptions() {
          this.chart.setOption({
            backgroundColor: 'white',
 
         title: {
             text: '课程内容分布',
             left: 'center',
             top: 20,
             textStyle: {
                 color: '#ccc'
             }
         },
         tooltip : {
             trigger: 'item',
             formatter: "{a} <br/>{b} : {d}%"
         },
 
         visualMap: {
             show: false,
             min: 500,
             max: 600,
             inRange: {
                 colorLightness: [0, 1]
             }
         },
         series : [
             {
                 name:this.gaterName,
                 type:'pie',
                 clockwise:'true',
                 startAngle:'0',
                 radius : '60%',
                 center: ['50%', '50%'],
                 data:this.pieDataList,
                //  data:[
                //       {
                //         value:70,
                //         name:'语言',
                //         itemStyle:{
                //              normal:{
                //                  color:'rgb(255,192,0)',
                //                 //  shadowBlur:'90',
                //                 //  shadowColor:'rgba(0,0,0,0.8)',
                //                 //  shadowOffsetY:'30'
                //              }
                //          }
                //      },
                //      {
                //          value:10,
                //          name:'美国科学&社会科学',
                //          itemStyle:{
                //              normal:{
                //                  color:'rgb(1,175,80)'
                //              }
                //          }
                //      },
                //      {
                //          value:20,
                //          name:'美国数学',
                //          itemStyle:{
                //              normal:{
                //                  color:'rgb(122,48,158)'
                //              }
                //          }
                //      }
 
                //  ],
              }        
            ]

          })
      }
    }
    }
</script>
